<template>
  <div class="setting">
    <div class="van-top">
      <van-nav-bar title="设置" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="header" @click="update">
      <van-image
        round
        width="2.5rem"
        height="2.5rem"
        fit="cover"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
      <span>{{ userInfo.nickname }}</span>
      <i>
        修改资料
        <van-icon name="arrow" />
      </i>
    </div>
    <div class="cell">
      <van-cell
        center
        title="允许3G/4G网络播放、缓存视频"
        style="height: 60px; font-size: 16px"
      >
        <template #right-icon>
          <van-switch active-color="green" v-model="checkedFirst" size="20" />
        </template>
      </van-cell>
      <van-cell
        center
        title="视频自动连续播放"
        style="height: 60px; font-size: 16px"
      >
        <template #right-icon>
          <van-switch active-color="green" v-model="checkedSecond" size="20" />
        </template>
      </van-cell>
    </div>

    <van-cell title="清除缓存" value="35.6M" />
    <van-cell title="调整学习兴趣" is-link />
    <van-cell title="版本更新" is-link @click="version" />
    <van-cell title="关于" is-link />

    <van-button
      plain
      type="primary"
      @click="cancelLogin"
      color="#FF6262"
      style="margin: 60px auto; width: 90%"
      block
    >
      退出登录
    </van-button>
    <van-dialog
      v-model:show="isShow"
      title="确定退出吗"
      show-cancel-button
      :beforeClose="chargeBtn"
    />
  </div>
</template>

<script>
import { Toast } from 'vant'

export default {
  name: 'setting',
  data() {
    return {
      checkedFirst: false,
      checkedSecond: false,
      isShow: false,
      // username: JSON.parse(localStorage.getItem('vuex')).login.userInfo
      //   .nickname,
    }
  },
  created() {
    if (localStorage.getItem('username')) {
      this.username = localStorage.getItem('username')
    }
  },
  methods: {
    version() {
      Toast('当前已是最新版本')
    },
    onClickLeft() {
      this.$router.push('/user')
    },
    cancelLogin() {
      console.log('111')
      this.isShow = true
    },
    chargeBtn(action, done) {
      if (action === 'confirm') {
        this.$router.push('/unlogin')
      } else if (action === 'cancel') {
        this.isShow = false
      }
    },
    update() {
      this.$router.push('/update')
    },
  },
  computed: {
    userInfo() {
      console.log(this.$store.getters['userModule/userInfo'])
      return this.$store.getters['userModule/userInfo']
    },
  },
}
</script>

<style scoped>
.setting {
  background: #f2f2f2;
}
.van-top /deep/ .van-nav-bar__title {
  font-size: 18px;
  font-weight: bold;
}
.van-top /deep/ .van-nav-bar .van-icon {
  color: black !important;
}
.header {
  height: 60px;
  margin: 10px 0;
  background: #fff !important;
}
.header .van-image {
  margin: 5px 5px 5px 20px;
}
.header span {
  position: absolute;
  left: 80px;
  top: 80px;
  bottom: 0;
  right: 0;
  margin: auto;
  font-size: 18px;
}
.header i {
  float: right;
  margin-right: 10px;
  line-height: 60px;
  font-style: normal;
  font-size: 16px;
}
.cell {
  margin: 10px 0;
}
.van-cell {
  height: 60px;
  font-size: 16px;
}
</style>
